import React, {Component} from 'react';
import SimpleSelect from "./simpleSelect";
import Start from "./help/Start";
import Stop from "./help/stop";
import DiscreteSlider from "./help/DiscreteSlider";
import SimpleSelectForAlgorithm from "./SimpleSelectForAlgorithm";
import "bootstrap/dist/js/bootstrap.bundle"
import "bootstrap/dist/css/bootstrap.css"
import $ from "jquery"
import "jquery-ui/jquery-ui"
import Directed from "./help/Directed";


const textAreaInput = "4 5\n" +
    "0 1 4\n" +
    "1 2 5\n" +
    "2 3 17\n" +
    "1 3 10\n" +
    "2 1 5";

const p_0 = "Note:";
const p_1 = ">> Line 1: input the number of vertices and edges seperated by a space.";
const p_2 = ">> Line edges: input start, end and positive weight seperated by a space.";

const p_3 = ">> All inputs should be positive integers under 100.";


class Menu extends Component {
    constructor() {
        super();
        this.items = [];
    }
    generateN = (n) => {
        let a = []
        for (let i = 0; i < n; i++) {
            a.push(i);
        }
        return a;
    }

    setItems = () => {
        let items = this.props.nodes;
        items = items.map(x=>x.label);
        this.items = [...items];
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        this.setItems();
    }

    componentDidMount = () => {
            $(function(){
        $(".modal-dialog").draggable({cancel : '.modal-body'});
        // $(".modal-dialog").draggable({cancel : '.btn'});
    });
     this.setItems();
    };



    // 获取输入
    getInput = (algo) => {
        let input;
        if (algo === 3) {
            input = (
                <React.Fragment>
                    <div className="me-2 align-self-center">
                  <button type="button" className="btn btn-primary" style={{whiteSpace: "nowrap", cursor: "not-allowed"}} data-bs-toggle="modal"
                          >Input
                  </button>
                </div>

                    <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <div className="input-group input-group-sm ml-2 mr-2"
                         style={{position: "relative", width: "15vw", height: "64px", lineHeight: "64px"}}>
                    <input id= "input" type="text" className="form-control" aria-label="Sizing example input"
                               aria-describedby="inputGroup-sizing-default" placeholder="1,2,3,4...(以英文逗号分隔)"
                           onChange={this.props.onChange}
                           style={{height: "70%", fontSize: "1.2em" ,position:"relative", top: "50%", transform: "translate(0px, -50%)"}}
                        />
                    </div>
                </div>
                </React.Fragment>

            )
        } else {
            input =
                <div className="me-2 align-self-center">
                  <button type="button" className="btn btn-primary" style={{whiteSpace: "nowrap"}} data-bs-toggle="modal"
                          data-bs-target="#staticBackdrop">Input
                  </button>
                  <div className="modal fade" id="staticBackdrop" data-bs-backdrop="static"
                       data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel"
                       aria-hidden="true">
                    <div className="modal-dialog float-end" >
                      <div className="modal-content">
                        <div className="modal-header">
                          <h5 className="modal-title" id="staticBackdropLabel">Input</h5>
                          <button type="button" className="btn-close" data-bs-dismiss="modal"
                                  aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                          <div className="alert alert-warning " role="alert">
                            <p className="m-0 fs-6 text-start">
                                {p_0}
                            </p>
                            <p className="m-0 fs-6 text-start">
                                {p_1}
                            </p>
                            <p className="m-0 fs-6 text-start">
                                {p_2}
                            </p>
                            <p className="m-0 fs-6 text-start">
                                {p_3}
                            </p>
                          </div>
                          <textarea className="form-control" name="" rows="10" id="input"
                                    style={{resize: "none"} }placeholder="" >{textAreaInput}
                                            </textarea>
                        </div>
                        <div className="modal-footer">
                          {/*<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>*/}
                          <button type="button" className="btn btn-success" id="customGraphButton"
                                  onClick={this.props.handleDraw}
                                  >Draw
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
        }
        return input;
    }

    // 从哪个点出发
    getSource = (algo) => {
        if (algo === 0) {
            return (
                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <SimpleSelect
                        selectNum = {this.props.from}
                        pos={0}
                        label={'From'}
                        items={[...this.items]}
                        onValueChanged={this.props.handleFrom}
                    />
                </div>
            )
        }

    }

    // 有向图还是无向图
    getDirected = (algo) => {
        if (algo === 0) {
            return (
                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <Directed
                        handleDirect={this.props.handleDirect}
                    />
                </div>
            )
        }
    }

    render = () => {
        let algo = this.props.algo;
        return (
            <div className="container-fluid" id="menu">
<div className="row">
            <div className="w-100 d-flex  flex-wrap">
                <div className="me-2 align-self-center">
                  <button type="button" className="btn btn-success" style={{whiteSpace: "nowrap"}}
                          id="newRandomGraphButton" onClick={this.props.onGenerate}>Generate
                  </button>
                </div>

                {this.getInput(algo)}

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <SimpleSelectForAlgorithm
                        pos={0}
                        label={'Algorithm'}
                        items={['Dijkstra','Kruskal',"Prim", "Huffman tree"]}
                        onValueChanged={this.props.setAlgo}
                    />
                </div>

                {/*{this.getSource(algo)}*/}

                {this.getDirected(algo)}

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <DiscreteSlider
                        handleSpeed={this.props.handleSpeed}
                    />
                </div>

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <Start
                        handlePaused = {this.props.handlePaused}
                        select = {this.props.select}
                    onStart={this.props.onStart}
                    />
                </div>

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light">
                    <Stop
                    onReset={this.props.onReset}
                    />
                </div>

            </div>
</div>
                </div>
        );
    }
    isClickable = () =>
        {
            if (this.props.disable) {
                return {cursor: "not-allowed"};
            } else {
                return {};
            }
        }
    }


    export default Menu;